<template>
  <a-form-model :model="form" ref="add" :label-col="{ span: 6 }" :wrapper-col="{ span: 13 }" :rules="formRules">
    <a-form-model-item label="直播间名称" prop="name" help="最短3个汉字，最长17个汉字，1个汉字相当于2个字符">
      <a-input v-model="form.name" />
    </a-form-model-item>
    <a-form-model-item label="背景图" prop="coverImg" help="直播间背景图，图片规则：建议像素1080*1920，大小不超过2M">
      <storage-select v-model="form.coverImg"></storage-select>
    </a-form-model-item>
    <a-form-model-item label="分享图" prop="shareImg" help="直播间分享图，图片规则：建议像素800*640，大小不超过1M">
      <storage-select v-model="form.shareImg"></storage-select>
    </a-form-model-item>
    <a-form-model-item label="购物直播频道封面图" prop="feedsImg" help="购物直播频道封面图，图片规则：建议像素800*800，大小不超过100KB">
      <storage-select v-model="form.feedsImg"></storage-select>
    </a-form-model-item>
    <a-form-model-item label="直播间计划时间" prop="times">
      <a-range-picker
        :show-time="{ format: 'HH:mm' }"
        format="YYYY-MM-DD HH:mm"
        :placeholder="['开始时间', '结束时间']"
        v-model="times"
        valueFormat="YYYY-MM-DD HH:mm"
      />
      <div slot="help">
        <div>开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后</div>
        <div>开播时间和结束时间间隔不得短于30分钟，不得超过24小时</div>
      </div>
    </a-form-model-item>
    <a-form-model-item label="主播昵称" prop="anchorName" help="主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符">
      <a-input v-model="form.anchorName" />
    </a-form-model-item>
    <a-form-model-item label="主播微信号" prop="anchorWechat" help="主播微信号，如果未实名认证，需要先前往“小程序直播”小程序进行实名验证">
      <a-input v-model="form.anchorWechat" />
    </a-form-model-item>
    <a-form-model-item label="是否开启评论" prop="closeComment" help="若关闭，观众端将隐藏评论入口，直播开始后不允许开启">
      <a-radio-group v-model="form.closeComment">
        <a-radio value="0">
          开启
        </a-radio>
        <a-radio value="1">
          关闭
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="是否开启点赞" prop="closeLike" help="若关闭，观众端将隐藏点赞按钮，直播开始后不允许开启">
      <a-radio-group v-model="form.closeLike">
        <a-radio value="0">
          开启
        </a-radio>
        <a-radio value="1">
          关闭
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="是否开启货架" prop="closeGoods" help="若关闭，观众端将隐藏商品货架，直播开始后不允许开启">
      <a-radio-group v-model="form.closeGoods">
        <a-radio value="0">
          开启
        </a-radio>
        <a-radio value="1">
          关闭
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="是否开启回放" prop="closeReplay" help="默认关闭回放，直播开始后允许开启">
      <a-radio-group v-model="form.closeReplay">
        <a-radio value="0">
          开启
        </a-radio>
        <a-radio value="1">
          关闭
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="是否开启分享" prop="closeShare" help="默认开启分享，直播开始后不允许修改">
      <a-radio-group v-model="form.closeShare">
        <a-radio value="0">
          开启
        </a-radio>
        <a-radio value="1">
          关闭
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="是否开启客服" prop="closeKf" help="默认关闭客服，直播开始后允许开启">
      <a-radio-group v-model="form.closeKf">
        <a-radio value="0">
          开启
        </a-radio>
        <a-radio value="1">
          关闭
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
import { saveWxlive } from '@/api/plugin/wxlive'
export default {
  name: 'WxLiveRoomAdd',
  components: {
  },
  data () {
    const checkRankingPic = (rule, value, callback) => {
      try {
        if (this.form.coverImg.trim() === '') {
          callback(new Error('请选择背景图片'))
        } else {
          callback()
        }
      } catch (error) {
        console.log('checkRankingPic', error)
        callback()
      }
    }
    const checkActivityPic = (rule, value, callback) => {
      try {
        if (this.form.shareImg.trim() === '') {
          callback(new Error('请选择分享图片'))
        } else {
          callback()
        }
      } catch (error) {
        console.log('checkActivityPic', error)
        callback()
      }
    }
    const checkFeedsImgPic = (rule, value, callback) => {
      try {
        if (this.form.feedsImg.trim() === '') {
          callback(new Error('请选择购物直播频道封面图'))
        } else {
          callback()
        }
      } catch (error) {
        console.log('checkFeedsImgPic', error)
        callback()
      }
    }
    const checkTimes = (rule, value, callback) => {
      try {
        if (this.times.length < 2) {
          callback(new Error('请选择直播间计划时间'))
        } else {
          callback()
        }
      } catch (error) {
        console.log('checkTimes', error)
        callback()
      }
    }
    return {
      form: {
        name: '',
        coverImg: '',
        shareImg: '',
        feedsImg: '',
        startTime: '',
        endTime: '',
        anchorName: '',
        anchorWechat: '',
        closeComment: '0',
        closeLike: '0',
        closeGoods: '0',
        closeReplay: '1',
        closeShare: '0',
        closeKf: '1'
      },
      // 上传文件请求头
      headers: {},
      // 表单验证规则
      formRules: {
        name: [
          { required: true, message: '请输入直播间名称', trigger: 'blur' }
        ],
        coverImg: [
          { required: true, validator: checkRankingPic, trigger: 'change' }
        ],
        shareImg: [
          { required: true, validator: checkActivityPic, trigger: 'change' }
        ],
        feedsImg: [
          { required: true, validator: checkFeedsImgPic, trigger: 'change' }
        ],
        times: [
          { required: true, validator: checkTimes, trigger: 'change' }
        ],
        anchorName: [
          { required: true, message: '请输入主播昵称', trigger: 'blur' }
        ],
        anchorWechat: [
          { required: true, message: '请输入主播微信号', trigger: 'blur' }
        ]
      },
      times: []
    }
  },
  created () {
  },
  methods: {
    toSave () {
      return new Promise((resolve, reject) => {
        this.$refs['add'].validate(valid => {
          if (valid) {
            try {
              this.form.startTime = this.times[0]
              this.form.endTime = this.times[1]
              this.is_loading = true
              saveWxlive(this.form).then((res) => {
                if (res.code === 0) {
                  resolve(res)
                } else {
                  reject(res)
                }
              })
            } catch (error) {
              reject(error)
            }
          } else {
            reject()
            return false
          }
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.uploadPic {
  display: flex;
  align-items: center;
}
.uploadPic /deep/ button {
  min-width: 40px;
  border-radius: 0;
}
.tips {
  margin: 0;
  padding: 0;
  line-height: normal;
  font-size: 12px;
  color: #D9534F;
}
.goods_pic_item_box {
  width: 100px;
  height: 100px;
  border: 1px solid #aaa;
  position: relative;
  margin-right: 10px;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.goods_pic_item_box .icon{
  position: absolute;
  top: 0;
  right: 0;
  /* margin-right: 10px; */
}
</style>
